<template>
  <div>
    <div class="quote-board">
      <article class="flex-box">
        <div>
          <h1>预估报价</h1>
          <em>￥{{total_price}}</em>
          <div class="detail">
            <p>
              共有{{type_length}}个平台，1个后台
              <button @click="hide">{{hideWords}}</button>
            </p>
            <p>{{page_total}}个页面,{{cycle_total}}个小时周期</p>
          </div>
        </div>
        <div class="right">
          <button @click="goBack">调整需求重新计算</button>
          <button @click="viewProject">
            预览项目
          </button>
          <button>下载报价表</button>
          <button>免费获取解决方案</button>
        </div>
      </article>
    </div>

    <div class="quote-board price-list" v-if="isShow.baojia">
      <h3>报价表</h3>
      <div class="line">
        <ul>
          <li v-for="(item,index) in type" :key="item.id" v-if="item != undefined">
            <input type="radio" :id="item.id" :checked="item.id == app_cate" v-on:click="checkAppCategory(item.id)" name="front">
            <label :for="item.id">{{item.name}}</label>
          </li>

         <li>
            <input type="radio" id="0" :checked="0 == app_cate" v-on:click="checkSumCycle()" name="front">
            <label for="0">总工期费用</label>
          </li>

        </ul>
      </div>

      <div class="line">
        <ul>
          <li @click="tabLabel('all')">
            <input type="radio" id="021" checked name="tect">
            <label for="021">全部</label>
          </li>
          <li @click="tabLabel('technology')">
            <input type="radio" name="tect" id="022">
            <label for="022">技术选型</label>
          </li>
          <li @click="tabLabel('functions')">
            <input type="radio" name="tect" id="023">
            <label for="023">功能需求表</label>
          </li>
          <li @click="tabLabel('cost')">
            <input type="radio" name="tect" id="024">
            <label for="024">工期费用</label>
          </li>
        </ul>
      </div>
      <div v-if="isShow.technology" class="date-time content">
        <h4>技术选型</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>要求</th>
            <th>说明</th>
          </tr>
          <tr>
            <td>后端技术</td>
            <td>{{list.language1_check[app_cate]!=undefined ? list.language1_check[app_cate].name:"无"}}</td>
            <td>{{list.language1_check[app_cate]!=undefined ? list.language1_check[app_cate].des:"无"}}</td>
          </tr>
          <tr>
            <td>页面制作技术</td>
            <td>{{list.language2_check[app_cate]!=undefined ? list.language2_check[app_cate].name:"无"}}</td>
            <td>{{list.language2_check[app_cate]!=undefined ? list.language2_check[app_cate].des:"无"}}</td>
          </tr>
          <tr>
            <td>页面设计技术</td>
            <td>{{list.language3_check[app_cate]!=undefined ? list.language3_check[app_cate].name:"无"}}</td>
            <td>{{list.language3_check[app_cate]!=undefined ? list.language3_check[app_cate].des:"无"}}</td>
          </tr>
          <tr>
            <td>终端</td>
            <td>{{verison_str}}</td>
            <td></td>
          </tr>

        </table>
      </div>

      <div v-if="isShow.functions" class="date-time content">
        <h4>功能需求表</h4>
        <table border="1">
          <tr>
            <th>应用版本</th>
            <th>板块</th>
            <th>子板块</th>
            <th>页面名称</th>
            <th>设计要求</th>
            <th>制作要求</th>
            <th>功能</th>
          </tr>
          <tr v-for="(item,index) in gongnen_list" :key="item.id">
            <td>{{item.app_version}}</td>
            <td>{{item.plate_name}}</td>
            <td>{{item.child_name}}</td>
            <td>{{item.page_name}}</td>
            <td>{{item.sheji}}</td>
            <td>{{item.zhizuo}}</td>
            <td>{{item.gongnen_str}}</td>
          </tr>
      
        </table>
      </div>

      <div v-if="isShow.cost" class="date-time content">
        <h4>工期费用</h4>
        <table border="1">
          <tr>
            <th>类目</th>
            <th>开发工时（小时）</th>
            <th>单价：（XX元/小时）</th>
            <th>费用（元）</th>
          </tr>
          <tr>
            <th>应用逻辑</th>
            <th>{{list.logic_cycle_total[app_cate]}}</th>
            <th>{{dev_price.logic}}</th>
            <th>{{dev_price.logic*list.logic_cycle_total[app_cate]}}</th>
          </tr>
          <tr>
            <th>功能开发</th>
            <th>{{list.gongnen_cycle_total[app_cate]}}</th>
            <th>{{dev_price.gongnen}}</th>
            <th>{{dev_price.gongnen*list.gongnen_cycle_total[app_cate]}}</th>
          </tr>
          <tr>
            <th>ui设计</th>
            <th>{{list.sheji_cycle_total[app_cate]}}</th>
            <th>{{dev_price.sheji}}</th>
            <th>{{dev_price.sheji*list.sheji_cycle_total[app_cate]}}</th>
          </tr>
          <tr>
            <th>页面制作</th>
            <th>{{list.zhizuo_cycle_total[app_cate]}}</th>
            <th>{{dev_price.qianduan}}</th>
            <th>{{dev_price.qianduan*list.zhizuo_cycle_total[app_cate]}}</th>
          </tr>
          <tr>
            <th>上线部署</th>
            <th>{{list.deploy_cycle[app_cate]}}</th>
            <th>{{dev_price.bushu}}</th>
            <th>{{dev_price.bushu*list.deploy_cycle[app_cate]}}</th>
          </tr>
          <tr>
            <th>总计</th>
            <th>{{parseInt(list.gongnen_cycle_total[app_cate])+parseInt(list.sheji_cycle_total[app_cate])+parseInt(list.zhizuo_cycle_total[app_cate])+parseInt(list.deploy_cycle[app_cate])+parseInt(list.logic_cycle_total[app_cate])}}</th>
            <th>/</th>
            <th>{{dev_price.logic*parseInt(list.logic_cycle_total[app_cate])+dev_price.gongnen*parseInt(list.gongnen_cycle_total[app_cate])+dev_price.sheji*parseInt(list.sheji_cycle_total[app_cate])+dev_price.qianduan*parseInt(list.zhizuo_cycle_total[app_cate])+dev_price.bushu*parseInt(list.deploy_cycle[app_cate])}}</th>
          </tr>
        </table>
      </div>


       <!--总汇总-->
     <div v-if="isShow.sum_cycle" class="date-time content" >
        <h4>总汇总</h4>
        <table border="1" ref="tableWrap">
         <tr>
           <th>类目</th>
           <th>开发工时（小时）</th>
           <th>单价：（XX元/小时）</th>
           <th>费用（元）</th>
         </tr>
         <tr class="tongji">
           <td>应用逻辑</td>
           <td>{{list.logic_cycle_total[0].cycle}}</td>
           <td>{{dev_price.logic}}</td>
           <td>{{list.logic_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>功能开发</td>
           <td>{{list.gongnen_cycle_total[0].cycle}}</td>
           <td>{{dev_price.gongnen}}</td>
           <td>{{list.gongnen_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>页面设计</td>
           <td>{{list.sheji_cycle_total[0].cycle}}</td>
           <td>{{dev_price.sheji}}</td>
           <td>{{list.sheji_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>页面制作</td>
           <td>{{list.zhizuo_cycle_total[0].cycle}}</td>
           <td>{{dev_price.qianduan}}</td>
           <td>{{list.zhizuo_cycle_total[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>上线部署</td>
           <td>{{list.deploy_cycle[0].cycle}}</td>
           <td>{{dev_price.bushu}}</td>
           <td>{{list.deploy_cycle[0].price}}</td>
         </tr>
         <tr class="tongji">
           <td>总计</td>
           <td>{{cycle_total}}</td>
           <td>\</td>
           <td>{{total_price}}</td>
         </tr>
       </table>
      </div>

    </div>

  </div>
</template>

<script>
  import axios from 'axios'
  export default{
    name:'step3',
    created: function() {
          window.scrollTo(0,0);
          var that=this;
          var checklist=localStorage.getItem('list');
          that.list=JSON.parse(checklist);

          var type=(JSON.parse(localStorage.getItem('checkedSysObj')) == undefined)?[]:JSON.parse(localStorage.getItem('checkedSysObj'));
          that.type_length=type.length;

          var obj={id:1,name:"后台"};
          type.push(obj);

          for(var i=0;i<type.length;i++){
              var item=type[i];
              if(that.list.gongnen_list[item.id]!=undefined){
                  that.type.push(item);
              }
          }

          var dev_price=localStorage.getItem('dev_price');
          that.app_cate=that.type[0].id;

          var verison_str="";
          var version_id=[];
          if(that.list.check_verison_arr[that.app_cate]!=undefined){

               for (var i in that.list.check_verison_arr[that.app_cate]) {
                     if(that.list.check_verison_arr[that.app_cate][i]) {
                         verison_str+=that.list.check_verison_arr[that.app_cate][i].name+"  ";
                         version_id.push(that.list.check_verison_arr[that.app_cate][i].id);
                     }
                 }
         }

         that.verison_str=verison_str;

          //console.log(that.list.gongnen_list);

          that.dev_price=JSON.parse(dev_price);
          if(that.list.gongnen_list[that.app_cate]!=undefined){
              for (var i in that.list.gongnen_list[that.app_cate]){
                  var value=that.list.gongnen_list[that.app_cate][i];
                  if(!(!value || value === "")){

                      value.gongnen_str="";
                      if(value.list){
                          value.list.forEach(function(g_vulue,g_index,g_array){
                              value.child_name=g_vulue.child_name
                              value.gongnen_str+=g_vulue.gongnen_name+'-'+g_vulue.child_gongnen_name+",";
                          });
                          value.gongnen_str=value.gongnen_str.substring(0,value.gongnen_str.length-1);
                      }else{
                          value.child_name="无";
                          value.gongnen_str="无";
                      }

                      var value_app_version=value.app_version;
                      var value_sheji=value.sheji;
                      var value_zhizuo=value.zhizuo;
                      if(version_id!=undefined){
                          for (var i in version_id){
                               var item_obj=that.cloneObj(value);
                               var version=version_id[i];
                               if(value_app_version!=undefined && value_app_version[version]!=undefined){
                                   item_obj.app_version=value_app_version[version];
                               }else {
                                   continue;
                               }

                              if(value_sheji!=undefined && value_sheji[version]!=undefined){
                                  item_obj.sheji=value_sheji[version];
                              }else{
                                  item_obj.sheji="不需要";
                              }

                              if(value_zhizuo!=undefined && value_zhizuo[version]!=undefined){
                                  item_obj.zhizuo=value_zhizuo[version];
                              }else{
                                  item_obj.zhizuo="不需要";
                              }
                              that.gongnen_list.push(item_obj);
                          }
                      }
                  }
              }
          }


           var total_price=0;
           var cycle_total=0;
           var page_total=0;
           that.list.logic_cycle_total[0]={price:0,cycle:0},
           that.list.gongnen_cycle_total[0]={price:0,cycle:0},
           that.list.sheji_cycle_total[0]={price:0,cycle:0},
           that.list.zhizuo_cycle_total[0]={price:0,cycle:0},
           that.list.deploy_cycle[0]={price:0,cycle:0},

           that.type.forEach(function(value,index,array){
             if(value!=undefined){
                 var sum=0;
                 var cycle=0

                 if(that.list.logic_cycle_total[value.id]!=undefined){
                     that.list.logic_cycle_total[0].price+=that.dev_price.logic*parseInt(that.list.logic_cycle_total[value.id]);
                     that.list.logic_cycle_total[0].cycle+=parseInt(that.list.logic_cycle_total[value.id]);

                     sum+=that.dev_price.logic*parseInt(that.list.logic_cycle_total[value.id]);
                     cycle+=parseInt(that.list.logic_cycle_total[value.id]);
                 }

                 if(that.list.gongnen_cycle_total[value.id]!=undefined){

                     that.list.gongnen_cycle_total[0].price+=that.dev_price.gongnen*parseInt(that.list.gongnen_cycle_total[value.id]);
                     that.list.gongnen_cycle_total[0].cycle+=parseInt(that.list.gongnen_cycle_total[value.id]);

                     sum+=that.dev_price.gongnen*parseInt(that.list.gongnen_cycle_total[value.id]);
                     cycle+=parseInt(that.list.gongnen_cycle_total[value.id]);
                 }

                 if(that.list.sheji_cycle_total[value.id]!=undefined){
                     that.list.sheji_cycle_total[0].price+=that.dev_price.sheji*parseInt(that.list.sheji_cycle_total[value.id]);
                     that.list.sheji_cycle_total[0].cycle+=parseInt(that.list.sheji_cycle_total[value.id]);

                     sum+=that.dev_price.sheji*parseInt(that.list.sheji_cycle_total[value.id]);
                     cycle+=parseInt(that.list.sheji_cycle_total[value.id]);
                 }

                 if(that.list.zhizuo_cycle_total[value.id]!=undefined){
                     that.list.zhizuo_cycle_total[0].price+=that.dev_price.qianduan*parseInt(that.list.zhizuo_cycle_total[value.id]);
                     that.list.zhizuo_cycle_total[0].cycle+=parseInt(that.list.zhizuo_cycle_total[value.id]);

                     sum+=that.dev_price.qianduan*parseInt(that.list.zhizuo_cycle_total[value.id]);
                     cycle+=parseInt(that.list.zhizuo_cycle_total[value.id]);
                 }

                 if(that.list.deploy_cycle[value.id]!=undefined){
                     that.list.deploy_cycle[0].price+=that.dev_price.bushu*parseInt(that.list.deploy_cycle[value.id]);
                     that.list.deploy_cycle[0].cycle+=parseInt(that.list.deploy_cycle[value.id]);

                     sum+=that.dev_price.bushu*parseInt(that.list.deploy_cycle[value.id]);
                     cycle+=parseInt(that.list.deploy_cycle[value.id]);
                 }



                 if(that.list.gongnen_list[value.id]!=undefined){
                     var gongnen_list=that.list.gongnen_list[value.id].filter(function(val){
                         return !(!val || val === "");
                     });
                     page_total+=gongnen_list.length;
                 }

                 total_price+=sum;
                 cycle_total+=cycle;
             }
　　　         
　　       });

           that.total_price=total_price;
           that.cycle_total=cycle_total;
           that.page_total=page_total;

           /*console.log(that.gongnen_list);*/

   },
    data() {
      return {
        hideWords: '隐藏报价表',
        list:[],
        type:[],
        dev_price:[],
        gongnen_list:[],
        app_cate:6,
        total_price:0,
        cycle_total:0,
        page_total:0,
        verison_str:"",
        type_length:0,
        isShow:{
          technology: true,
          functions: true,
          cost: true,
          baojia:true,
          sum_cycle:false,
        }
      }
    },
    methods: {
      viewProject(){
          this.$router.push({path:'/previewFunc'});
      },
      goBack() {
            this.$router.go(-1);
      },
      cloneObj(obj){
          var that=this;
          var newObj = {};
          if (obj instanceof Array) {
              newObj = [];
          }
          for (var key in obj) {
              var val = obj[key];
              //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
              newObj[key] = typeof val === 'object' ? that.cloneObj(val): val;
          }
          return newObj;
      },
      hide(){
        if(this.isShow.baojia){
            this.hideWords="显示报价表";
        }else{
            this.hideWords="隐藏报价表";
        }
        this.isShow.baojia=!this.isShow.baojia;
      },
      tabLabel(item){
        if(item == 'all'){
          for(let i in this.isShow){
            this.isShow[i] = true;
          }
        }else {

          for(let i in this.isShow){
            this.isShow[i] = false;
            if(i == item){
              this.isShow[i] = true;
            }
          }
        }
         this.isShow.baojia = true;
         console.log(this.isShow);

      },
      checkAppCategory(id){
            this.app_cate=id;
            var that=this;

            if(this.list.gongnen_list[this.app_cate]!=undefined){
                this.isShow.technology=true;
                this.isShow.functions=true;
                this.isShow.cost=true;
                this.isShow.sum_cycle=false;
                that.gongnen_list=[];
                that.list.gongnen_list[that.app_cate].forEach(function(value,index,array){
                    if(!(!value || value === "")){
                        value.gongnen_str="";
                        if(value.list){
                            value.list.forEach(function(g_vulue,g_index,g_array){
                                value.child_name=g_vulue.child_name
                                value.gongnen_str+=g_vulue.gongnen_name+'-'+g_vulue.child_gongnen_name+",";

                            });
                            value.gongnen_str=value.gongnen_str.substring(0,value.gongnen_str.length-1);
                        }else{
                            value.child_name="无";
                            value.gongnen_str="无";
                        }

                        if(!value.sheji){
                            value.sheji="不需要";
                        }

                        that.gongnen_list.push(value);
                    }
              }); 
            }else{
         /*     this.isShow.technology=false;
              this.isShow.functions=false;
              this.isShow.cost=false;*/
              this.gongnen_list=[];
            }

      },
      checkSumCycle(){
            this.app_cate=0;
            for(let i in this.isShow){
              this.isShow[i] = false;
           }
           this.isShow.sum_cycle=true;
           this.isShow.baojia=true;
      },
    }
  }
</script>

<style scoped>
  .quote-board {
    margin: 2rem auto 0;
    max-width: 980px;
    padding: 3rem 3rem 4rem;
    border-radius: .4rem;
    background-color: #fff;
    width: 100%;
  }

  article {
    min-height: 20.5rem;
    padding: 2rem 0 2rem 3rem;
    background-color: rgba(221,227,235,.2);
    border-radius: inherit;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .quote-board article h1 {
    font-size: 2rem;
    font-weight: 400;
    color: #000;
    margin: 0 0 1.6rem;
  }
  .quote-board article em {
    display: block;
    margin-left: .5rem;
    font-size: 3.5rem;
    font-style: normal;
    color: #4289db;
  }
  .quote-board article em:after {
    content: "\5143";
    font-size: 1.5rem;
  }
  .quote-board article .detail {
    margin: 1.6rem 0 0;
  }
  .quote-board article p {
    line-height: 1.5rem;
    font-size: 1rem;
    margin-bottm: .5rem;
  }
  .quote-board .detail button {
    padding: .1rem .5rem;
    line-height: 1.4em;
    height: auto;
    width: auto;
    background-color: hsla(212,9%,63%,.5);
    box-shadow: none;
    margin-left: .5rem;
    color: #fff;
    float: none;
    cursor: pointer;
    border-radius: .4rem;
    box-sizing: border-box;
    border: 0;
    box-shadow: 0 3px 3px rgba(45,51,56,.2);
    outline: none;
  }
  .quote-board article .right {
    width: 40%;
    height: 100%;
    /*padding-top: 10rem;*/
    border-left: 1px solid hsla(212,9%,63%,.2);
    text-align: center;
  }
  .quote-board article .right button {
    color: #4289db;
    margin-top: 1rem;
    background-color: #fff;
    border: 1px solid hsla(212,9%,63%,.2);
    height: 3rem;
    width: 14.3rem;
    font-size: 1rem;
    border-radius: .4rem;
    cursor: pointer;
  }
  .quote-board article .right .link {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #4289db;
    line-height: 3rem;
  }
  .price-list h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  .price-list .line {
    padding-top: 1.2rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  }
  .price-list .line ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid hsla(212,9%,63%,.3);
  }
  .price-list .line ul li {
    position: relative;
    width: 10rem;
    height: 2.4rem;
    line-height: 2.4rem;
    color: #979fa8;
    font-size: 1rem;
    text-align: center;
    background: #fff;
    border-left: 1px solid hsla(212,9%,63%,.3);
  }
  .price-list .line ul li label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .price-list .line ul li:first-child {
    border-left: none;
  }
  .price-list .line ul li input[type="radio"] {
    position: absolute;
    top: 0;
    visibility: hidden;
  }
  .price-list .line ul li input[type="radio"]:checked + label {
    background: #4289db;
    color: #fff;
  }
  .price-list .date-time {
    width: 100%;
    margin: 40px auto 0;
    background: #c9ccd2;
  }
  .price-list .date-time h4 {
    font-size: 1.2rem;
    padding: 0.7rem;
    text-align: center;
    color: #fff;
  }
  .price-list .date-time table {
    \width: 100%;
    background: #fff;
    border-collapse:collapse;
    border-color: hsla(212,9%,63%,.2);
  }
  .price-list .date-time table td, .price-list .date-time table th {
    padding: 0.5rem;
    text-align: center;
  }
  .price-list .date-time table th {
    background: #f3f5f7;
  }
</style>
